<script setup lang="ts">
import { reactive, Ref, ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
// import type { ComponetInternalInstance } from 'vue';
// import type { ComponentInternalInstance } from "vue";
import { onLoad, onReady } from '@dcloudio/uni-app'

// import loader1 from '../analysis/analysis.vue'
const flag: Ref<boolean> = ref(true);
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const radar = ref()

onLoad(() => {
  setTimeout(() => {
    flag.value = false;
  }, 1000);
  // proxy.$refs.radar.
  // proxy?.$refs.radar
  // radar

})

onReady(() => {

  proxy?.$refs.radar.draw(options.dataset);
  proxy?.$refs.line.draw(options.options1.dataset);

  // $refs.radar && $refs.radar.draw(options.dataset)
})


const options = reactive({
  indicator: [{
    name: '提交次数',
    max: 6500
  },
  {
    name: '正确率',
    max: 16000
  },
  {
    name: '活跃度',
    max: 30000
  },
  {
    name: '松懈度',
    max: 38000
  },
  {
    name: '平均时长',
    max: 52000
  },
  {
    name: '指标',
    max: 25000
  }
  ],
  dataset: [{
    source: [4200, 3000, 20000, 35000, 50000, 18000],
    name: '学习',
    color: '#5677fc'
  },
  {
    source: [5000, 14000, 28000, 26000, 42000, 21000],
    name: '进度',
    color: '#07c160'
  }
  ],
  options1: {
    xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
    dataset: [{
      name: '营业额',
      color: '#5677fc',
      source: [380, 210, 320, 160, 300, 200]
    }],
    max: 600,
    splitNumber: 100
  }
})

// const radar=ref(options.dataset)


</script>

<template>
  <view class="container">
    <view class="radar">
      <view class="title">学习技能图</view>
      <tui-charts-radar :indicator="options.indicator" ref="radar" style="margin-top: 30rpx;margin-bottom: 80rpx;"></tui-charts-radar>
    </view>
    <view class="radar">
      <view class="title">活跃度</view>
      <tui-charts-line ref="line" tooltip :xAxis="options.options1.xAxis" :dataset="options.options1.dataset"
        :max="options.options1.max" :splitNumber="options.options1.splitNumber" style="margin-top: 30rpx;"></tui-charts-line>
    </view>
  </view>
</template>
<style scoped lang="scss">
.container {
  position: relative;
  @include flex-column(center);

  .title {
    // position: absolute;
    // left: 20rpx;
    text-align: center;
    font-size: 35rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
  }

  .radar {


    // margin-top: 20rpx;
    // height: 800rpx;
    // margin: auto;
  }
}
</style>
